<template>
	<view class="um-more">
		<view :key="key" v-for="(item, key) in newItems" @tap="emits('click', item)">{{item.label}}</view>
		<view v-if="items.length>limit" @tap="emits('onMore')">更多</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue';

	const emits = defineEmits(['click', 'onMore'])

	const props = withDefaults(defineProps<{ items ?: any[], limit ?: number }>(), {
		items: [] as any,
		limit: 3
	})

	const newItems = computed(() => {
		return JSON.parse(JSON.stringify(props.items)).splice(0, props.limit)
	})
</script>

<style lang="scss" scoped>
	.um-more {
		display: flex;
		gap: 24rpx;
		font-size: 26rpx;
	}
</style>